<app-overview [refreshProOverview]='overviewProData' [refreshMark]='overviewProMark'></app-overview>

<div nz-row class="margin-example">
  <div nz-col [nzSpan]="6" style="float:left">
    <nz-input-group [nzSuffix]="suffixIconSearch" style="width: 400px">
      <input type="text" nz-input placeholder="请输入搜索内容...">
    </nz-input-group>
    <ng-template #suffixIconSearch>
      <i nz-icon type="search"></i>
    </ng-template>
  </div>
  <div nz-col [nzSpan]="18" style="text-align: right">
    <button *szAcl="['groupadmin']" nz-button nzType="primary" (click)="createProgramModal()">
      <i nz-icon type="plus" theme="outline"></i>创建项目
    </button>
  </div>
</div>

<div class="custom_table">
  <nz-table #ajaxTable nzShowSizeChanger [nzFrontPagination]="false" [nzData]="dataSet" [nzTotal]="total"
    [(nzPageIndex)]="pageIndex" [(nzPageSize)]="pageSize" (nzPageIndexChange)="getProgramPage()" [nzLoading]="loading"
    (nzCurrentPageDataChange)="currentPageDataChange($event)" (nzPageSizeChange)="getProgramPage(true)">
    <thead (nzSortChange)="sort($event)" nzSingleSort>
      <tr>
        <th nzShowCheckbox [(nzChecked)]="allChecked" [nzIndeterminate]="indeterminate"
          (nzCheckedChange)="checkAll($event)"></th>
        <th nzShowSort nzSortKey="name">项目名称</th>
        <th>版本</th>
        <th>应用数</th>
        <th>风险级别</th>
        <th>CVE</th>
        <th>最后更新时间</th>
        <!-- <th>添加应用</th> -->
        <th>更多</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of ajaxTable.data">
        <td nzShowCheckbox [(nzChecked)]="data.checked" (nzCheckedChange)="refreshStatus()"></td>
        <td>
          <a [routerLink]="[ '/layout/project/project-detail']"
            [queryParams]="{projectUuid: data.projectUuid,title: '应用'}">{{data.projectName}}</a>
        </td>
        <td>{{ data.version }}</td>
        <td>
          <a [routerLink]="[ '/layout/application/app-list']"
            [queryParams]="{projectUuid: data.projectUuid,title: '应用'}">{{ data.appNum }}</a>
        </td>
        <td>
          <!-- 需要做细节处理 -->
      
            <span class="grade-A" *ngIf="data.grade === 'A'"></span>
            <span class="grade-B" *ngIf="data.grade === 'B'"></span>
            <span class="grade-C" *ngIf="data.grade === 'C'"></span>
            <span class="grade-D" *ngIf="data.grade === 'D'"></span>
            <span class="grade-E" *ngIf="data.grade === 'E'"></span>
            <span class="grade-default" *ngIf="!data.grade"></span>
            &nbsp;&nbsp;
            {{ data.grade | noData}}
        </td>
        <td>{{ data.cveNum }}</td>
        <td>{{ data.modifyTime | date:"MM-dd-yy hh:mm:ss" }}</td>
        <td>
          <!-- <a (click)="addAppModal(data.projectUuid)">添加应用</a> -->
          <nz-dropdown>
            <a nz-dropdown>
              更多 <i nz-icon type="down"></i>
            </a>
            <ul nz-menu nzSelectable>
              <li nz-menu-item>
                <a (click)="addAppModal(data.projectUuid)">添加应用</a>
              </li>
            </ul>
          </nz-dropdown>

        </td>
      </tr>
    </tbody>
  </nz-table>
</div>